<template>
    

    <div class="comment-box">
        
        <!-- 顶部导航栏 -->
        <div class="head-nav">
            <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft">
                <template #title>
                {{Title.comments}} 条评论
                
                </template>
            </van-nav-bar>
        </div>
        <div class="comment-text">
            <!-- 评论内容整体 -->
        
            <!-- 长评 -->
                <div class="long-title">
                    {{Title.long_comments}} 条长评
                </div>
                <div class="long-main" v-for="item in Long" :key="item.id">
                    
                    <div class="head-portrait"><img :src="item.avatar" alt=""></div>
                    <div class="long-content">
                        <div class="top-box">                      
                        <div class="names">{{item.author}}</div>
                        <div class="more">...</div>
                        </div>
                        <div class="talk">{{item.content}}</div>
                        <div class="bottom-time">
                            <div class="data">{{item.time}}</div>
                            <div class="nav-bottom">
                                <div class="good">{{item.likes}}<van-icon  name="good-job-o" /></div>
                                <div class="discuss" @click="Longanswer(item.id,item.author)" ><van-icon name="chat-o" /></div>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>

                 <div class="long-title">
                    {{Title.short_comments}} 条短评
                </div>


                <div class="long-main" v-if = "msg!=''" >
                    <div class="head-portrait"><img src="../assets/myicon.jpg" alt=""></div>
                    <div class="long-content">
                        <div class="top-box">                      
                        <div class="names">南风北巷</div>
                        <div class="more">...</div>
                        </div>
                        <div class="talk">{{msg}}</div>
                        <div class="bottom-time">
                            <div class="data"></div>
                            <div class="nav-bottom">
                                <div class="good"><van-icon name="good-job-o" /></div>
                                <div class="discuss"><van-icon name="chat-o" /></div>
                            </div>
                        </div>
                        
                    </div>
                   
                </div>


                <div class="long-main" v-for="item in Short" :key="item.id">
                    <div class="head-portrait"><img :src="item.avatar" alt=""></div>
                    <div class="long-content">
                        <div class="top-box">                      
                        <div class="names">{{item.author}}</div>
                        <div class="more">...</div> 
                        </div>
                        <div class="talk">{{item.content}}</div>
                        <div class="bottom-time">
                            <div class="data">{{item.time|timer
                                }}</div>
                            <div class="nav-bottom">
                                <div class="good">{{item.likes}}<van-icon name="good-job-o" /></div>
                                <div class="discuss" @click="Shortanswer(item.id,item.author)" ><van-icon name="chat-o" /></div>
                            </div>
                        </div>
                        
                    </div>
                   
                </div>

                



                <div class="allShow">已显示全部评论</div>
                
        </div>
            <div class="myView" @click="viewPoint(id)"><img :src="Icon" alt=""> &nbsp; 说说你的看法...</div>
    
        
                
                
        
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import moren from '../assets/moren.jpg';
    import myicon from '../assets/myicon.jpg';
    import { EventBus } from "../event-bus"


    export default {
        name:'Comment',
        data(){
            return{
                id:'',
                msg:'',
                Title:[],
                Long:[],
                Short:[],
                Icon:moren,
                nowTime:'',
            }
        },

        components:{
            Toast,
            moren,
            myicon,
           EventBus,
        },

        filters:{

             year(val){
                 let time = new Date(val)
                 
                 
            
                
        },
            
        },

        created(){
            this.id = this.$route.params.id;
            this.getComment(this.id);
            this.getLong(this.id);
            this.getShort(this.id)
            this.accetp()
        },

         mounted(){
            
            

            this.getCookie()
            
            this.getIcon()

            
        },


        beforeDestroy(){
             EventBus.$off('fromMsg')

          
        },

         methods: {

           accetp(){
                EventBus.$on("fromMsg", (val) => {
                // A页面发送来的消息
                this.msg = val;
                

            })
           },


            onClickLeft() { 
             this.$router.go(-1);
           
            },

            viewPoint(id){
             if(this.username=='Admin'&& this.password==='123456'){
            this.$router.push({name: 'Viewpoint', params: {id}});
             }
        },

            Longanswer(id,name){
               
                this.$router.push({name: 'Longanswer', query: {id,name}});
                
            },
            Shortanswer(id,name){
                
                this.$router.push({name: 'Shortanswer', query: {id,name}});
            },
            
            
            getComment(id){
                this.axios({

                 params: {
                   id
                },
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/story/'+this.id+'/extra',

                

            }).then(result =>{
                
                this.Title = result.data;
                
               
                
            }).catch(err =>{
                
            })
            },
            // 获取长评
            getLong(id){
                this.axios({

                 params: {
                   id
                },
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/story/'+this.id+'/long-comments',

                

            }).then(result =>{
                
                this.Long = result.data.comments;
                
                
                
            }).catch(err =>{
               
            })
            },
            // 获取短评
            getShort(id){
                this.axios({

                 params: {
                   id
                },
                // 请求类型
                method:'get',
                // 请求路径  最新日报
                 url: 'https://apis.netstart.cn/zhihudaily/story/'+this.id+'/short-comments',

                

            }).then(result =>{
                
                this.Short = result.data.comments;
                
                
                
            }).catch(err =>{
               
            })
            },

             getIcon(){
                if(this.username=='Admin'&& this.password==='123456'){
                     this.Icon=myicon
                }
            },

             getCookie() {
            if (document.cookie.length>0) {
                let arr=document.cookie.split('; ');//这里显示的格式需要切割一下自己可输出看下
                
                for(let i=0;i<arr.length;i++){
                    let arr2=arr[i].split('=');//再次切割
                    
                    //判断查找相对应的值
                    if(arr2[0]=='userName'){
                    this.username=arr2[1];//保存到保存数据的地方
                    }else if(arr2[0]=='userPwd'){
                    this.password=arr2[1];
                    }
                }
            }
        },

         
        




        },

        


    }
</script>

<style lang="less" scoped>

    .comment-box{
        width: 100%;
       
        background-color: rgb(255, 255, 255);
        .comment-text{
            height:calc(100vh - 96px);
            overflow: auto;
        }
    }
    
    
    .long-title{
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        margin-left: 10px;
        font-weight: bold;
    }
    .long-main{
        display: flex;
        margin-top: 20px;
        width: 100% ;
        border-bottom: 1px solid #dfdfdf;
        
    }
    // 头像
    .head-portrait{
        width:  35px;
        height: 35px;
        border-radius: 50%;
        margin: 0px 10px;
    }
    // 评论内容
    .long-content{
        width: 100%;
        margin-right: 15px;
    }
    .top-box{
        
        display: flex;
        justify-content: space-between;
        
        
        
    }
    .names{
        font-size: 18px;
        font-weight: bold;
    }
    .more{
        
        font-size: 16px;
    }
    .talk{
        margin-top: 5px;
        font-size: 14px;
        text-align: justify;
    }
    .data{
        color: rgb(206, 205, 205);
        font-size: 13px;

    }
    
    // 发表时间
    .bottom-time{
        display: flex;
        justify-content: space-between;
        margin: 15px 0px;
        
    }
    .nav-bottom{
        width: 65px;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        color: #7c7c7c;
    }
    
    img{
        width: 35px;
        height: 35px;
         border-radius: 50%;

    }

    .allShow{
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        text-align: center;
        color: #c4c4c4;
        
    }

    .myView{
        padding-left: 10px;
        display: flex;
        align-items: center;
        height: 50px;
        background-color: rgb(230, 230, 230);
        font-size: 14px;
    }

</style>